<!doctype html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8" >
    <meta http-equiv="X-UA-Compatible" content="IE=11,IE=10,IE=9,IE=8" >
    <meta name="baidu-site-verification" content="dIcXMeY8Ya" />
    
    <title>AngularJS项目使用RequireJS压缩工具r.js的配置与填坑 | 帮助中心</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0" >
    <meta name="keywords" content="Jelon, 前端, Web, 张德龙, 前端开发" >
    <meta name="description" content="Jelon个人前端小站" >

    
    <link rel="alternative" href="/atom.xml" title="帮助中心" type="application/atom+xml" >
    
    
    <link rel="shortcut icon" href="/favicon.ico" >
    
    <link rel="stylesheet" href="/css/style.css">
    <!--[if lt IE 9]>
    <script src="/js/html5.js"></script>
    <![endif]-->
    
<script>
    var _hmt = _hmt || [];
    (function() {
        var hm = document.createElement("script");
        hm.src = "//hm.baidu.com/hm.js?fd459238242776d173cdc64918fb32f2";
        var s = document.getElementsByTagName("script")[0];
        s.parentNode.insertBefore(hm, s);
    })();
</script>


</head>

<body class="home">
    <!--[if lt IE 9]>
    <div class="browsehappy">
        当前网页 <strong>不支持</strong>
        你正在使用的浏览器. 为了正常的访问, 请 <a href="http://browsehappy.com/">升级你的浏览器</a>.
    </div>
    <![endif]-->

    <!-- 博客头部 -->
    <header class="header">
    <section class="container header-main">
        <div class="logo">
            <a href="/">
                <div class="cover">
                    <span class="name">帮助中心</span>
                    <span class="description">帮助中心</span>
                </div>
            </a>
        </div>
        <div class="dropnav icon-paragraph-justify" id="JELON__btnDropNav"></div>
        <ul class="menu hidden" id="JELON__menu">
            
            <li rel="/2018/08/23/AngularJS/index.html" class="item ">
                <a href="/" title="首页" class="icon-home">&nbsp;首页</a>
            </li>
            
            <li rel="/2018/08/23/AngularJS/index.html" class="item ">
                <a href="/lab/" title="实验室" class="icon-lab">&nbsp;实验室</a>
            </li>
            
            <li rel="/2018/08/23/AngularJS/index.html" class="item ">
                <a href="/about/" title="关于" class="icon-about">&nbsp;关于</a>
            </li>
            
            <li rel="/2018/08/23/AngularJS/index.html" class="item ">
                <a href="/comment/" title="留言" class="icon-comment">&nbsp;留言</a>
            </li>
            
        </ul>
        <div class="profile clearfix">
            <div class="feeds fl">
                
                
                <p class="links">
                    
                        <a href="https://github.com/jangdelong" target="_blank">Github</a>
                        |
                    
                        <a href="https://pages.coding.me" target="_blank">Hosted by Coding Pages</a>
                        
                    
                </p>
                <p class="sns">
                    
                        <a href="http://weibo.com/jangdelong" class="sinaweibo" target="_blank"><b>■</b> 新浪微博</a>
                    
                        <a href="https://www.facebook.com/profile.php?id=100011855760219&amp;ref=bookmarks" class="qqweibo" target="_blank"><b>■</b> Facebook</a>
                    
                    <a href="javascript: void(0);" class="wechat">
                        <b>■</b>
                        公众号
                        <span class="popover">
                            <img src="/img/wechat_mp.jpg" width="120" height="120" alt="我的微信订阅号">
                            <i class="arrow"></i>
                        </span>
                    </a>
                </p>
                
            </div>
            <div class="avatar fr">
                <img src="/img/jelon.jpg" alt="avatar" title="Jelon" >
            </div>
        </div>
    </section>
</header>
<div class="canvas-container">
    <div class="banner-font-container">
        <div class="banner-font">
            <p><span style="font-size: 28px; color: rgb(217, 83, 79);">学</span>而不思则罔，思而不学则殆。</p>
            <p>故不积蹞步，无以至千里；不积小流，无以成江海。</p>
            <p>路漫漫其修道远，吾将上下而求索。</p>
        </div>
    </div>
</div>


    <!-- 博客正文 -->
    <div class="container body clearfix">
        <section class="content">
            <div class="content-main widget">
                <!-- 文章页 -->
<!-- 文章 -->
<article class="post article">
    <header class="text-center">
        <h3 class="post-title"><span>AngularJS项目使用RequireJS压缩工具r.js的配置与填坑</span></h3>
    </header>
    <p class="post-meta text-center">
        huhao 发表于
        <time datetime="2018-08-23T13:09:27.840Z">2018-08-23</time>
    </p>
    <div class="post-content">
        <p>　　在项目使用了AngularJS框架，用RequireJS做异步模块加载（AMD），最近做项目优化，在打包JS依赖的过程中，遇到了一些坑，所以在这里分享一下自己的拙见。</p>
<p>　　r.js是requireJS的优化（Optimizer）工具，可以实现前端文件的压缩与合并，在requireJS异步按需加载的基础上进一步提供前端优化，减小前端文件大小、减少对服务器的文件请求。这里，我们需要下载r.js，下载的途径有几种，这里是传送门<a href="https://github.com/requirejs/r.js" target="_blank" rel="noopener">GitHub</a>，<a href="https://raw.githubusercontent.com/requirejs/r.js/master/dist/r.js" target="_blank" rel="noopener">r.js</a>。</p>
<p>　　<strong>１.新建r.js的配置文件。</strong><br>　　既然是打包配置，必然有对应的配置文件，没错你需要在你的项目中新建一个配置文件，例如built.js、config.js。建议和你的r.js一样放在你的项目根目录，一切从简。</p>
<p>　　<strong>2.编辑配置文件。</strong><br>　　编辑之前，查看项目index.html里require.js的入口文件为main.js，然后找到main.js。<br>　　<strong>html 代码</strong></p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&lt;script data-main=&quot;./main.js&quot; src=&quot;//cdn.bootcss.com/require.js/2.3.2/require.min.js&quot;&gt;&lt;/script&gt;</span><br></pre></td></tr></table></figure>
<p>　　这里是main.js的关键代码。注意依赖关系和CDN加载。<br>　　<strong>javascript 代码</strong></p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br></pre></td><td class="code"><pre><span class="line">require.config(&#123;</span><br><span class="line">    baseUrl: &apos;/&apos;,</span><br><span class="line">    skipDataMain: true,</span><br><span class="line">    urlArgs: &apos;&apos; + WEB_VERSION,</span><br><span class="line">    waitSeconds: 0,</span><br><span class="line">    paths: &#123;</span><br><span class="line">        &apos;angular&apos;: [CDN_BOOT_URL + &apos;/angular.js/1.2.9/angular.min&apos;, CDN_BAIDU_URL + &apos;/angular.js/1.2.9/angular.min&apos;, STATIC_URL + &apos;/assert/angular/1.2.29/angular.min&apos;],</span><br><span class="line">        &apos;angularroute&apos;: [CDN_BOOT_URL + &apos;/angular-ui-router/0.4.2/angular-ui-router.min&apos;, STATIC_URL + &apos;/asset/angular-ui-router/angular-ui-router.min&apos;]</span><br><span class="line">    &#125;,</span><br><span class="line">    shim: &#123;</span><br><span class="line">        &apos;angular&apos;: &#123;</span><br><span class="line">            exports: &apos;angular&apos;,</span><br><span class="line">            deps: []</span><br><span class="line">        &#125;,</span><br><span class="line">        &apos;angularroute&apos;: &#123;</span><br><span class="line">            exports: &apos;angularroute&apos;,</span><br><span class="line">            deps: [&apos;angular&apos;]</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;);</span><br><span class="line"></span><br><span class="line">require([&apos;angular&apos;, &apos;app_controller&apos;], function (angular) &#123;</span><br><span class="line">    angular.element(document).ready(function () &#123;</span><br><span class="line">        angular.bootstrap(document, [&apos;app&apos;]);</span><br><span class="line">    &#125;);</span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure>
<p>　　接下来开始操作r.js配置文件build.js。这里有传送门<a href="http://www.yfznw.com/node/22" target="_blank" rel="noopener">r.js相关的中文配置详解</a>。其实打包配置不需要写太多属性，只需要配置一些你所需要的就行了。于是乎配置如下：</p>
<p>　　<strong>javascript 代码</strong></p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">(&#123;</span><br><span class="line">    baseUrl: &quot;./&quot;,                 </span><br><span class="line">    name: &quot;main&quot;,      //对应的require入口文件main.js</span><br><span class="line">    out: &quot;index-built.js&quot;</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>
<p>　　然后打开CMD命令行进入项目目录，然后运行node r.js -o build.js，结果就出现问题了嘛，前面的angular和ui-router是引用的CDN，所以就报错：Error: ENOENT: no such file or directory, open ‘H:\yct.www\angular.js’，这是什么原因呢？就是因为必要参数没有配齐。这时候我们需要添加参数path：【设置模块的路径。相对路径以baseUrl为当前目录。如果是”empty:”则指向一个空文件。使优化器在输出时不会包含该文件。对于指向CDN或者其它在浏览器中运行的http:URL的模块有用，在优化过程中它应该被跳过因为它没有依赖项。】<br>　　<br>所以我添加了配置之后如下：<br>　　<strong>javascript 代码</strong></p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line">(&#123;</span><br><span class="line">    baseUrl: &quot;./&quot;,                 </span><br><span class="line">    name: &quot;main&quot;,</span><br><span class="line">    paths: &#123;</span><br><span class="line">        &quot;angular&quot;: &apos;empty:&apos;,</span><br><span class="line">        &quot;angularroute&quot;: &apos;empty:&apos;</span><br><span class="line">    &#125;,</span><br><span class="line">    out: &quot;index-built.js&quot;</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>
<p>　　注意empty后面有个英文字符的:，这是细节。没错这次运行打包成功了。</p>
<p>　　<strong>3.运行项目</strong><br>　　然后你需要修改项目根index.html的require.js的data-main文件，修改为你的打包文件index-built.js。这时候在浏览器刷新一下你的页面看看效果。结果悲剧了：Uncaught Error: [$injector:modulerr] <a href="http://errors.angularjs.org/1.2.9/$injector/modulerr?p0=app&amp;p1=Error%3A%20%…ootcss.com%2Fangular.js%2F1.2.9%2Fangular.min.js%3F201707120000%3A17%3A431" target="_blank" rel="noopener">http://errors.angularjs.org/1.2.9/$injector/modulerr?p0=app&amp;p1=Error%3A%20%…ootcss.com%2Fangular.js%2F1.2.9%2Fangular.min.js%3F201707120000%3A17%3A431</a>)</p>
<p>　　这次是angularJS的模块加载出错，也就是依赖关系出现了问题。为何打包之前正常运行，打包之后运行就模块依赖出错呢？这个问题一度让我抓狂。打开index-built.js发现，模块加载变成这般样子。
　　</p>
<p><img src="//cdn.files.qdfuns.com/article/content/picture/201707/26/101302h5na0530mq1b9knz.jpg" alt="模块加载出错"><br>　　既然被压成这样子了，这就导致了angularJS找不到自己的模块错误，这里我们再看看api文档，再问度娘问谷哥，终于找到了，配置如下。</p>
<p>　　<strong>javascript 代码</strong></p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line">(&#123;</span><br><span class="line">    baseUrl: &quot;./&quot;,</span><br><span class="line">    paths: &#123;</span><br><span class="line">        &quot;angular&quot;: &apos;empty:&apos;,</span><br><span class="line">        &quot;angularroute&quot;: &quot;empty:&quot;</span><br><span class="line">    &#125;,</span><br><span class="line">    name: &quot;main&quot;,</span><br><span class="line">    uglify2: &#123;</span><br><span class="line">        mangle: false 　　//false 不混淆变量名</span><br><span class="line">    &#125;,</span><br><span class="line">    out: &quot;index-built.js&quot;,</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>
<p>　　于是我们再次运行打包命令，刷新页面，Ok大功告成，没毛病，打包后的模块如下。
　　</p>
<p><img src="//cdn.files.qdfuns.com/article/content/picture/201707/26/101302h5na0530mq1b9knz.jpg" alt="打包后的模块"><br>　　在前端网待了快一年了，这是第一次写笔记，嘿嘿，希望大家能欢迎我这个老新人，共同交流一起进步。</p>

    </div>
    <p class="post-meta">
        <span class="post-cat">分类：
            <a class="cat-link" href="/categories/Web技术/">Web技术</a>|<a class="cat-link" href="/categories/Web技术/生活琐事/">生活琐事</a>
        </span>
        <span class="post-tags">
            标签：
            
    
        <a href="/tags/AngularJs/" title="AngularJs">AngularJs</a>
    

        </span>
    </p>
</article>
<!-- 分享按钮 -->

  <div class="article-share clearfix text-center">
    <div class="share-area">
      <span class="share-txt">分享到：</span>
      <a href="javascript: window.open('http://service.weibo.com/share/share.php?url=' + encodeURIComponent(location.href) + '&title=' + document.title + '&language=zh_cn');" class="share-icon weibo"></a>
      <a href="javascript: alert('请复制链接到微信并发送');" class="share-icon wechat"></a>
      <a href="javascript: window.open('http://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url=' + encodeURIComponent(location.href) + '&title=' + document.title);" class="share-icon qqzone"></a>
      <a href="javascript: window.open('http://connect.qq.com/widget/shareqq/index.html?url=' + encodeURIComponent(location.href) + '&desc=Jelon个人博客&title=' + document.title + '&callback=' + encodeURIComponent(location.href));" class="share-icon qq"></a>
      <a href="javascript: window.open('http://shuo.douban.com/!service/share?href=' + encodeURIComponent(location.href) + '&name=' + document.title + '&text=' + document.title);" class="share-icon douban"></a>
    </div>
  </div>


<!-- 上一篇/下一篇 -->

<div class="article-nav clearfix">
    
    <span class="prev fl">
        上一篇<br >
        <a href="javascript: void(0);">没有上一篇了</a>
    </span>
    

    
    <span class="next fr">
        下一篇<br >
        <a href="/2018/08/23/hello-world/">
            
                Hello World
            
        </a>
    </span>
    
</div>

<!-- 文章评论 -->

  <script src="/js/comment.js"></script>
  <div id="comments" class="comment">
    <!--
    <div class="sign-bar">
      GitHub 已登录!
      <span class="sign-link">登出</span>
    </div>
    <section class="box">
      <div class="com-avatar"><img src="/img/jelon.jpg" alt="avatar"></div>
      <div class="com-text">
        <div class="main">
          <textarea class="text-area-edited show" placeholder="欢迎评论！"></textarea>
          <div class="text-area-preview"></div>
        </div>
        <div class="switch">
          <div class="switch-item on">编辑</div>
          <div class="switch-item">预览</div>
        </div>
        <div class="button">提交</div>
      </div>
    </section>
    <section class="tips">注：评论支持 markdown 语法！</section>
    <section class="list-wrap">
      <ul class="list">
        <li>
          <div class="user-avatar">
            <a href="/">
              <img src="/img/jelon.jpg" alt="user-avatar">
            </a>
          </div>
          <div class="user-comment">
            <div class="user-comment-header">
              <span class="post-name">张德龙</span>
              <span class="post-time">2017年12月12日</span>
              <span class="like liked">已赞</span>
              <span class="like-num">2</span>
            </div>
            <div class="user-comment-body">333333</div>
          </div>
        </li>
        <li>
          <div class="user-avatar">
            <a href="/">
              <img src="/img/jelon.jpg" alt="user-avatar">
            </a>
          </div>
          <div class="user-comment">
            <div class="user-comment-header">
              <span class="post-name">刘德华</span>
              <span class="post-time">2017年12月12日</span>
              <span class="like">点赞</span>
              <span class="like-num">2</span>
            </div>
            <div class="user-comment-body">vvvvv</div>
          </div>
        </li>
      </ul>
      <div class="page-nav">
        <a href="javascript: void(0);" class="item">1</a>
        <a href="javascript: void(0);" class="item">2</a>
        <a href="javascript: void(0);" class="item current">3</a>
      </div>
    </section>
    -->
  </div>
  <script>
  JELON.Comment({
    container: 'comments',
    label: 'AngularJS' || '2018/08/23/AngularJS/',
    owner: 'jangdelong',
    repo: 'blog_comments',
    clientId: 'b08ed25e52c57993e69c',
    clientSecret: '1cb9545488f0380904b87350e7c5a270ae03bab7'
  });
  </script>


            </div>

        </section>
        <!-- 侧栏部分 -->
<aside class="sidebar">
    <section class="widget">
        <h3 class="widget-hd"><strong>文章分类</strong></h3>
        <!-- 文章分类 -->
<ul class="widget-bd">
    
    <li>
        <a href="/categories/Web技术/">Web技术</a>
        <span class="badge">(1)</span>
    </li>
    
    <li>
        <a href="/categories/Web技术/生活琐事/">生活琐事</a>
        <span class="badge">(1)</span>
    </li>
    
</ul>
    </section>

    
    <section class="widget">
        <h3 class="widget-hd"><strong>热门标签</strong></h3>
        <!-- 文章标签 -->
<div class="widget-bd tag-wrap">
  
    <a class="tag-item" href="/tags/AngularJs/" title="AngularJs">AngularJs (1)</a>
  
    <a class="tag-item" href="/tags/测试数据/" title="测试数据">测试数据 (1)</a>
  
</div>
    </section>
    

    

    
    <!-- 友情链接 -->
    <section class="widget">
        <h3 class="widget-hd"><strong>友情链接</strong></h3>
        <!-- 文章分类 -->
<ul class="widget-bd">
    
        <li>
            <a href="http://blog.sina.com.cn/u/1825875765" target="_blank" title="网络安全博客">Haoren博客</a>
        </li>
    
        <li>
            <a href="http://blog.csdn.net/yeweiouyang" target="_blank" title="技术博客">Maxwell博客</a>
        </li>
    
        <li>
            <a href="http://xuanzh.cc/" target="_blank" title="技术博客">朱旋个人博客</a>
        </li>
    
</ul>
    </section>
    
</aside>
<!-- / 侧栏部分 -->
    </div>

    <!-- 博客底部 -->
    <footer class="footer">
    &copy;
    
        2016-2018
    

    <a href="/">Jelon Loves You</a>
</footer>
<div class="back-to-top" id="JELON__backToTop" title="返回顶部">返回顶部</div>

    <!--博客js脚本 -->
    <!-- 这里放网站js脚本 -->
<script src="/js/main.js"></script>
</body>
</html>